﻿@page "/buttons/button-group"

@using Syncfusion.Blazor.SplitButtons

@inherits SampleBaseComponent

<SampleDescription>
    <p> The following sample demonstrates the default functionalities of default, single, and multiple selections in ButtonGroup component.</p>
</SampleDescription>
<ActionDescription>
    <p>The <code>ButtonGroup</code> is a graphical user interface that groups series of buttons horizontally or vertically.</p>
    <p>
        The above sample demonstrates the ButtonGroup component with icon only, text only, and text with icon combinations.
    </p>
    <ul>
        <li><b>Default:</b> Triggers action on button click.</li>
        <li><b>Single selection:</b> It selects a single button and submits its value on form submission. This is showcased with the second button disabled, by default.</li>
        <li><b>Multiple selection:</b> It selects multiple buttons and submits its selected values on form submission. This is showcased with the first button selected, by default.</li>
    </ul>
    <p> More information about Blazor ButtonGroup component can be found in this <a target="" _blank"" href=" https://blazor.syncfusion.com/documentation/button-group/getting-started/"> documentation section</a>.</p>
</ActionDescription>


<div class="control-section">
    <div class="button-group-section">
        <div id="button-group-control">
            <div class="row">
                <p class="h5">Default</p>
                <SfButtonGroup>
                    <ButtonGroupButton IconCss="bg-icons e-btngrp-watch"></ButtonGroupButton>
                    <ButtonGroupButton IconCss="bg-icons e-btngrp-star"></ButtonGroupButton>
                    <ButtonGroupButton IconCss="bg-icons e-btngrp-download"></ButtonGroupButton>
                </SfButtonGroup>
            </div>
            <div class="row">
                <p class="h5">Single selection</p>
                <SfButtonGroup Mode="SelectionMode.Single">
                    <ButtonGroupButton @bind-Selected="@leftSelected">Left</ButtonGroupButton>
                    <ButtonGroupButton @bind-Selected="@centerSelected" Disabled="true">Center</ButtonGroupButton>
                    <ButtonGroupButton @bind-Selected="@rightSelected">Right</ButtonGroupButton>
                </SfButtonGroup>
            </div>
            <div class="row">
                <p class="h5">Multiple selection</p>
                <SfButtonGroup Mode="SelectionMode.Multiple">
                    <ButtonGroupButton @bind-Selected="@boldSelected" IconCss="bg-icons e-btngrp-bold">Bold</ButtonGroupButton>
                    <ButtonGroupButton @bind-Selected="@italicSelected" IconCss="bg-icons e-btngrp-italic e-icon-left">Italic</ButtonGroupButton>
                    <ButtonGroupButton @bind-Selected="@underlineSelected" IconCss="bg-icons e-btngrp-underline e-icon-left">Underline</ButtonGroupButton>
                </SfButtonGroup>
            </div>
        </div>
    </div>
</div>

@code {
    private bool boldSelected = true;
    private bool italicSelected;
    private bool underlineSelected;

    private bool leftSelected;
    private bool centerSelected;
    private bool rightSelected;
}

<style>
    /* icons loaded*/
    @@font-face {
        font-family: 'e-bg-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .bg-icons {
        font-family: 'e-bg-icons' !important;
        speak: none;
        font-size: 14px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .e-btngrp-watch::before {
        content: '\e71b';
    }

    .e-btngrp-star::before {
        content: '\e710';
    }

    .e-btngrp-download::before {
        content: '\e712';
    }

    .e-btngrp-bold::before {
        content: '\e71a'
    }

    .e-btngrp-italic::before {
        content: '\e708';
    }

    .e-btngrp-underline::before {
        content: '\e703';
    }
    .button-group-section {
        width: 320px;
        margin: 0 auto;
        margin-top: 1.7%;
        margin-bottom: 1.7%;
    }

    .e-bigger .button-group-section {
        width: 350px;
    }

    .button-group-section .row {
        margin: 0 0 30px 0;
    }

    .button-group-section .row:last-child {
        margin-bottom: 0;
    }

    .button-group-section .row .p:first-child {
        margin-top: 0;
    }

    @@media only screen and (max-width: 500px) {
        .button-group-section {
            margin-top: 0%;
            margin-bottom: 0%;
        }

        .button-group-container {
            overflow-y: scroll;
        }
    }
</style>  